import cn from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import { useForm } from 'react-hook-form';
import { joiResolver } from '@hookform/resolvers';
import { withRouter } from 'react-router';
import Dialog from '@kuiper-components/dialog';
import Input from '@kuiper-components/input';
import Button from '@kuiper-components/button';

import { job } from '../../../../../common/validation';
import Form, { Field } from '../../../../components/Form';
import TargetInput from '../../../../components/TargetInput';
import s from './style.module.css';

function ChangeJob({
	className,
	children,
	onSubmit,
	location,
	record,
	isDialog,
}) {
	const search = new URLSearchParams(location.search);
	const openAndCreate = search.get('create-job');

	const [loading, setLoading] = React.useState(false);
	const [createDialogVisible, setCreateDialogVisible] = React.useState(
		!!openAndCreate
	);
	const form = useForm({
		defaultValues: {
			// TODO: 数据结构
			target: { protocol: record.target.protocol, host: record.target.host },
			note: record.note,
			sourceIp: record.sourceIp,
		},
		// resolver: joiResolver(job),
		mode: 'onChange',
	});
	const handleCloseModal = () => setCreateDialogVisible(false);

	const handleChildrenClick = () => {
		if (isDialog) {
			setCreateDialogVisible(true);
		}
		const onClick = children.props.onClick;
		if (onClick) onClick();
	};

	const handleSubmit = data => {
		if (!createDialogVisible) return;
		data._id = record._id;
		data.jobId = record.job_id
		setLoading(true);
		if (loading) return;
		onSubmit(data);
		setLoading(false);
		handleCloseModal();
	};
	React.useEffect(() => {}, [createDialogVisible]);
	return (
		<>
			{React.cloneElement(children, {
				...children.props,
				onClick: handleChildrenClick,
			})}
			<Dialog
				title="修改信息"
				visible={createDialogVisible}
				wrapClassName={s.dialog}
				onClose={handleCloseModal}
				destroyOnClose={false}
			>
				<Form
					className={cn(className, s.createJob)}
					form={form}
					onSubmit={handleSubmit}
				>
					<div className={s.inputContainer}>
						<Field
							required
							className={s.formField}
							label="资产名称"
							name="note"
							as={Input}
							placeholder="请输入资产名称"
							componentClassName={s.input}
						/>
						<Field
							required
							className={s.formField}
							label="资产地址"
							name="target"
							as={TargetInput}
							componentClassName={s.target}
							placeholder="请输入资产地址"
							disableInput
							disableSelect
						/>
						<Field
							className={s.formField}
							label="源站IP"
							name="sourceIp"
							as={Input}
							disabled
							componentClassName={s.input}
						/>
					</div>
					<div className={s.btnContainer}>
						<Button className={s.btn} size="small" onClick={handleCloseModal}>
							取消
						</Button>
						<Button
							className={s.btn}
							primary
							size="small"
							type="submit"
							loading={loading}
							disabled={!form.formState.isValid}
						>
							确定
						</Button>
					</div>
				</Form>
			</Dialog>
		</>
	);
}

ChangeJob.propTypes = {
	className: PropTypes.string,
	children: PropTypes.node.isRequired,
	onSubmit: PropTypes.func.isRequired,
	isDialog: PropTypes.bool,
	uid: PropTypes.string,
	location: PropTypes.shape({
		search: PropTypes.string,
	}),
	record: PropTypes.any,
	maxDomain: PropTypes.shape({
		value: PropTypes.number,
	}),
	userInfo: PropTypes.shape({
		identified: PropTypes.bool,
	}),
};
ChangeJob.defaultProps = {
	className: s.createJob,
};

export default withRouter(ChangeJob);
